<!DOCTYPE html>
<html>

<head>
    <title>Collada File Import</title>
    <meta charset="utf-8">
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>

<div id="webgl-container">
</div>
<div id="gui-container" style="position:absolute;z-index:1;top:0;left:0">
</div>

<body>
    <script type="text/javascript" src="js/three.js"></script>
    <script type="text/javascript" src="js/OrbitControls.js"></script>
    <script type="text/javascript" src="js/ColladaLoader.js"></script>
    <script type="text/javascript" src="js/dat.gui.js"></script>
    <script type="text/javascript">
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(0xeeeeee, 1.0);
        renderer.setSize(window.innerWidth, window.innerHeight);
        var webglContainer = document.getElementById('webgl-container');
        webglContainer.appendChild(renderer.domElement);

         // camera controls
        var camControls = new THREE.OrbitControls(camera, renderer.domElement);
        camControls.damping = 0.2;
        camControls.addEventListener('change', render);

         // window resize handler
        window.addEventListener('resize', onWindowResize, false);

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
            render();
        }

        var axes = new THREE.AxisHelper(20);
        scene.add(axes);

        var grid = new THREE.GridHelper(40, 1);

         // create the ground plane
        var planeGeometry = new THREE.PlaneGeometry(80, 80, 10, 10);
        var planeMaterial = new THREE.MeshLambertMaterial({
            color: 0xffffff
        });
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 0;
        plane.position.y = -0.05;
        plane.position.z = 0;
        scene.add(plane);

         // ---- 3D CONTENT CREATION -----------------------------------------------------

        var loader = new THREE.ColladaLoader();
		var haube;
        var fenster;
        var dach;
		var rad = new Array();
		var streifen;
        loader.options.convertUpAxis = true;
        loader.load('assets/cooper.dae', function (collada) {   
            var dae = collada.scene;   
            var skin = collada.skins[0];
            dae.position.set(0, 0.4, 0); //x,z,y- if you think in blender dimensions ;)
            dae.rotation.y = -0.5 * Math.PI;
            dae.scale.set(10, 10, 10);
			scene.add(dae);
			
			// get Objects for modification
			haube = dae.getObjectByName("Haube");
			streifen = dae.getObjectByName("Streifen");
            dach = dae.getObjectByName("Dach");
            fenster = dae.getObjectByName("Fenster");
			
			rad[0] = dae.getObjectByName("FelgeFL");
			rad[1] = dae.getObjectByName("FelgeFR");
			rad[2] = dae.getObjectByName("FelgeHL");
			rad[3] = dae.getObjectByName("FelgeHR");
			
			
			
            render();
        });

         // ---- END OF 3D CONTENT CREATION ---------------------------------------------

         // position and point the camera to the center of the scene
        camera.position.x = -35;
        camera.position.y = 30;
        camera.position.z = 50;
        camera.lookAt(scene.position);

         // add subtle ambient lighting
        var ambientLight = new THREE.AmbientLight(0x111111);
        scene.add(ambientLight);

         // add spotlight
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-80, 70, 90);
        scene.add(spotLight);
		
		// add headlight
        var headColor = "#777777";
        var headLight = new THREE.PointLight(headColor, 1.0);
        headLight.position.set(camera.position.x, camera.position.y, camera.position.z);
        scene.add(headLight);
		
		
		var haubenColor = "#FF0000";
		var StreifenColor = "#FF0000";
		var RadColor = ["#00FF00","#00FF00","#00FF00","#00FF00"];

         // add GUI control elements
        var guiControls = new function () {
            this.showAxes = true;
            this.showGrid = false;
            this.showPlane = true;
            this.asWireframes = false;
            this.animated = true;
            this.withShadow = false;
            this.withFog = false;
			this.headColor = headColor;
            this.Dach = true;
            this.Fenster = 1;
			this.haubenColor = haubenColor;
			this.RadFLColor = RadColor[0];
			this.RadFRColor = RadColor[1];
			this.RadHLColor = RadColor[2];
			this.RadHRColor = RadColor[3];
			this.StreifenColor = StreifenColor;
        }

        var gui = new dat.GUI();
        var guiContainer = document.getElementById('gui-container');
        guiContainer.appendChild(gui.domElement);
        gui.add(guiControls, 'showAxes').onChange(function (e) {
            showAxes = e;
            if (showAxes) {
                scene.add(axes);
            } else {
                scene.remove(axes);
            }
            render();
        });
        gui.add(guiControls, 'showGrid').onChange(function (e) {
            showGrid = e;
            if (showGrid) {
                scene.add(grid);
            } else {
                scene.remove(grid);
            }
            render();
        });
        gui.add(guiControls, 'showPlane').onChange(function (e) {
            showPlane = e;
            if (showPlane) {
                scene.add(plane);
            } else {
                scene.remove(plane);
            }
            render();
        });
		
		guiLights = gui.addFolder('LIGHTS');
		guiLights.addColor(guiControls, 'headColor').onChange(function (e) {
            headLight.color = new THREE.Color(e);
			render();
        });

        guiVisible = gui.addFolder('Toogle Visible');
        guiVisible.add(guiControls, 'Dach').onChange(function (e) {
            if (e) {
                for(i = 0; i < dach.children[0].material.materials.length; i++) {
                    dach.children[0].material.materials[i].visible = true;
                }
                dach.children[0].material.visible = true;
            } else {
                for(i = 0; i < dach.children[0].material.materials.length; i++) {
					var material = Object.create( dach.children[0].material.materials[i] );
					material.visible =  false;
					dach.children[0].material.materials[i] = material;
                }
            }
            render();
        });
		
		guiVisible = gui.addFolder('Change Opacity');
		guiVisible.add(guiControls,'Fenster', 0, 1).step(0.1).onChange(function (e) {
			for(i = 0; i < fenster.children[0].material.materials.length; i++) {
				var material = Object.create( fenster.children[0].material.materials[i] );
				material.transparent = true;
				material.opacity = e;
				fenster.children[0].material.materials[i] = material;
            }
			render();
        });

		guiColors = gui.addFolder('Haube');
		guiColors.addColor(guiControls, 'haubenColor').onChange(function (e) {
			var material = Object.create( haube.children[0].material.materials[0] );
            material.color =  new THREE.Color(e);
			haube.children[0].material.materials[0] = material;
			render();
        });
		
		guiColors = gui.addFolder('Streifen');
		guiColors.addColor(guiControls, 'StreifenColor').onChange(function (e) {
			var material = Object.create( streifen.children[0].material );
            material.color =  new THREE.Color(e);
			streifen.children[0].material = material;
			render();
        });
		
		guiRad = gui.addFolder('Räder');
		guiRadFL = guiRad.addFolder('RadFL');
		guiRadFL.addColor(guiControls, 'RadFLColor').onChange(function (e) {
            var material = Object.create( rad[0].children[0].material );
            material.color =  new THREE.Color(e);
			rad[0].children[0].material = material;
			render();
        });
		guiRadFL = guiRad.addFolder('RadFR');
		guiRadFL.addColor(guiControls, 'RadFRColor').onChange(function (e) {
            var material = Object.create( rad[0].children[0].material );
            material.color =  new THREE.Color(e);
            rad[1].children[0].material = material;
			render();
        });
		guiRadFL = guiRad.addFolder('RadHL');
		guiRadFL.addColor(guiControls, 'RadHLColor').onChange(function (e) {
            var material = Object.create( rad[0].children[0].material );
            material.color =  new THREE.Color(e);
            rad[2].children[0].material = material;
			render();
        });
		guiRadFL = guiRad.addFolder('RadHR');
		guiRadFL.addColor(guiControls, 'RadHRColor').onChange(function (e) {
            var material = Object.create( rad[0].children[0].material );
            material.color =  new THREE.Color(e);
            rad[3].children[0].material = material;
			render();
        });
		
         // init and call render function
        function render() {
            headLight.position.set(camera.position.x, camera.position.y, camera.position.z);
            renderer.render(scene, camera);
        }
        initAnim(false); // no gui
        initShadow(false);
        initFog(false);
        render();
        setShadow(false);
        setFog(false);

         // animate the 3D objects
        function initAnim(value) {
            if (value) {
                gui.add(guiControls, 'animated').onChange(function (e) {
                    animated = e;
                    if (animated) animate();
                });
            }
        }

        var step = 0;
        var scalingStep = 0;

        function animate() {
            if (guiControls.animated) {
                // DO ANIMATING 3D ELEMENTS

                // request re-rendering
                requestAnimationFrame(animate);
            }
            render();
        }

         // shadow cast on plane
        function initShadow(value) {
            // SET receiveShadow AND castShadow FLAGS OF 3D ELEMENTS WITH SHADOW
            plane.receiveShadow = value;
            spotLight.castShadow = value;
            renderer.shadowMapEnabled = value;
            if (value) {
                gui.add(guiControls, 'withShadow').onChange(function (e) {
                    withShadow = e;
                    setShadow(withShadow);
                });
            }
        }

        function setShadow(value) {
            if (value) {
                renderer.shadowMapAutoUpdate = true;
            } else {
                renderer.shadowMapAutoUpdate = false;
                renderer.clearTarget(spotLight.shadowMap);
            }
            render();
        }

         // fog
        var fog;

        function initFog(value) {
            if (value) {
                fog = new THREE.Fog(0xeeeeee, 0.0000001, 150);
                scene.fog = fog;
                gui.add(guiControls, 'withFog').onChange(function (e) {
                    withFog = e;
                    setFog(withFog);
                });
            }
        }

        function setFog(value) {
            if (!fog) return;
            if (value) {
                fog.near = 0.000000001;
                fog.far = 150;
            } else {
                fog.near = 8000;
                fog.far = 8000;
            }
            render();
        }
    </script>
</body>

</html>